<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>通讯录</title>
  <script src="../../../static/kaige/js/szload.js"></script>
  <style>
    .lefttable .layui-table-tool .layui-table-tool-self {
      display: none;
    }

    .lefttable .layui-table-tool .layui-table-tool-temp {
      padding-right: 10px;
    }
  </style>
</head>

<body>
  <div class="kaige-body kaige-btn-radius">
    <div class="layui-row layui-col-space8">
      <div class="layui-col-md3 lefttable">
        <table class="layui-table" id="deptTable" lay-filter="deptTable"></table>
      </div>
      <div class="layui-col-md9 pagelist">
        <table class="layui-table" id="pageTable" lay-filter="pageTable"></table>
      </div>
    </div>
  </div>
  <script>
    load_init_js(function () {
      layui.config({
        base: szoapcpath + '/static/kaige/layuiextend/'
      }).use(['kaige'], function () {
        var form = layui.form, table = layui.table, laydate = layui.laydate, kaige = layui.kaige, element = layui.element, treeTable = layui.treeTable;
        //系统默认图片
        window.default_image = szoapcpath + "/static/img/default.png";
        //查看图片
        window.viewImage = function (imgUrl) { kaige.viewimage({ maxwidth: 600, maxheight: 600, url: imgUrl }); }
        var loadnum = 0;

        treeTable.render({
          elem: "#deptTable",
          id: "IDdeptTable",
          url: "/hrm.dept/index",
          toolbar: '#TPL-treeTable-header',
          defaultToolbar: false,
          height: 'full-35',
          cols: [[
            { field: 'name', title: '名称', minWidth: 150 },
            { field: 'company_id_name', title: '所属单位' },
          ]],
          page: false,
          tree: {
            view: { expandAllDefault: true, showIcon: false }
          },
          done: function () {
            if (loadnum < 1) {
              //所属单位
              kaige.xmSelectTree({
                id: 'company_id2',
                url: '/select/companytree',
                udata: { automatch: 1 },
                radio: true,
                clickClose: true,
                style: {
                  minHeight: '30px',
                  lineHeight: '30px',
                  borderRadius: '30px',
                  height: '30px',
                },
                tips: '请选择单位',
                callback: function (des) {
                  //执行重载数据
                  treeTable.reloadData('IDdeptTable', {
                    where: {
                      company_id: des.id
                    }
                  });
                }
              });
              loadnum++;
            }
          }
        });

        // 表头工具栏工具事件
        treeTable.on("toolbar(deptTable)", function (obj) {
          // 获取选中行
          switch (obj.event) {
            case "open-all":
              treeTable.expandAll('IDdeptTable', true); // 展开全部节点
              break;
            case "close-all":
              treeTable.expandAll('IDdeptTable', false); // 关闭全部节点
              break;
          }
        });

        //触发行单击事件
        treeTable.on('row(deptTable)', function (obj) {
          var id = obj.data.id;
          if (obj.data.pid == 0) { id = '' }
          table.reloadData('pageTable', {
            where: {
              dept_id: id
            }
          });
        });

        //加载列表
        kaige.table({
          elem: '#pageTable',
          title: '员工列表',
          url: "/hrm.employee/index",
          id: 'pageTable',
          toolbar: '#dtoolbar',
          cols: [[
            { type: 'numbers', title: '序号', fixed: 'left', hide: true },
            { field: 'phone', title: '员工', templet: '#employeeinfoTpl', sort: true, width: 180, fixed: 'left' },
            { field: 'dept_id_name', title: '主部门', width: 140 },
            { field: 'ranking_id_name', title: '岗位', width: 140 },
            { field: 'email', title: '邮箱', width: 180 },
            { field: 'tel', title: '办公电话', width: 140, hide: true },
            { field: 'bn', title: '编号', width: 130 },
            { field: 'pingyin_name', title: '名字拼音', width: 130, sort: true },
            {
              field: 'sex', title: '性别', width: 80, sort: true, align: 'center', templet: function (d) {
                return sex2icon(d.sex);
              }
            },
            { field: 'super_name', title: '上级主管', width: 140 },
            { field: 'company_name', title: '单位', width: 140 },            
            {
              field: 'on_duty', title: '在岗', width: 90, sort: true, templet: function (d) {
                return yesno2tag(d.on_duty);
              }
            },
            {
              field: 'status', title: '状态', width: 90, sort: true, templet: function (d) {
                return yesno2icon(d.status);
              }
            },
          ]],
          done: function (res, curr, count) {
            if (loadnum < 1) {
              searchInit();
              loadnum++;
            }
          }
        });

        //列表-监听表头工具栏事件dtoolbar
        table.on('toolbar(pageTable)', function (obj) {
          var checkStatus = table.checkStatus(obj.config.id);
          switch (obj.event) {
            case 'btn-refresh':
              location.reload();
              break;
          }
        });

        /**向服务端发送请求排序*/
        table.on('sort(pageTable)', function (obj) {
          table.reloadData('pageTable', {
            initSort: obj
            , where: {
              sortfield: obj.field
              , sortord: obj.type
            }
            , page: {
              curr: 1
            }
          });
        });

        function searchInit() {
          form.on('submit(search-btn-submit)', function (data) {
            $where = data.field;
            uwhere = {};
            for (var i in $where) {
              uwhere[i] = $where[i] ? encodeURIComponent($where[i]) : '';
            }
            table.reloadData('pageTable', {
              page: {
                curr: 1
              }
              , where: uwhere
            }, true);
            return false;
          });
        }

      });
    });
  </script>

  <script type="text/html" id="dtoolbar">
    <div class="layui-inline">
      <input class="layui-input tsinput" name="keywords" placeholder="名称/手机/电话">
      <button class="tsbutton" lay-submit lay-filter="search-btn-submit" title="筛选"><i class="layui-icon layui-icon-search"></i></button>
    </div>
    <div class="layui-btn-group">
      <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="btn-refresh"><i class="fa fa-refresh"></i> 刷新</button>
    </div>
  </script>
  <script type="text/html" id="employeeinfoTpl">
  <div class="pageinfotitle">
    <div class="uif-avatar">
      {{# if( d.avatar != undefined || d.avatar != null ) { }}
      <a href="javascript:void(0);" onclick="viewImage('{{ d.avatar }}')">
        <img src="{{ d.avatar }}" class="list_avatar" alt="" />
      </a>
      {{# } else { }}
      <a href="javascript:void(0);" onclick="viewImage('{{ window.default_image }}')">
        <img src="{{ window.default_image }}" class="list_avatar" alt="" />
      </a>
      {{# } }}
    </div>
    <div class="uif-info">
      {{# if(d.phone=='' || d.phone==null || d.phone=='null') { }}
      <p>{{d.real_name}}</p>
      {{# } else { }}
      <p>{{d.real_name}}</p>
      <p>{{d.phone}}</p>
      {{# } }}
    </div>
  </div>
  </script>
  <script type="text/html" id="TPL-treeTable-header">
    <div class="layui-inline">
      <div class="kaige-select-div" id="company_id2_select_box"></div>
      <input type="hidden" id="company_id2_name"/>
      <input type="hidden" id="company_id2"/>
    </div>
    <div class="layui-btn-group">
      <button type="button" class="layui-btn layui-bg-blue layui-btn-sm" lay-event="open-all" title="全展开"><i class="layui-icon layui-icon-down"></i></button>
      <button type="button" class="layui-btn layui-bg-blue layui-btn-sm" lay-event="close-all" title="全关闭"><i class="layui-icon layui-icon-right"></i></button>
    </div>        
  </script>
</body>

</html>